<template>
    <biz-form-remote-select 
        :placeholder="$t('common.placeholder.selectCustomer')"
        :remote-method="remoteMethod" 
        :value="selectValue"
        :multiple="false" 
        value-key="id" 
        v-bind="$attrs" 
        cleared 
        @input="handleChange"
    >
        <div class="customer-template-option" slot="option" slot-scope="{ option }">
            <h3>{{ option.name }}</h3>
            <p class="customer-template-option-content">
                <span class="customer-template-option-content-text">
                    <label>{{$t('common.fields.phone.displayName')}}：</label>
                    <span>{{ option.lmPhone || '' }}</span>
                </span>
                <span class="customer-template-option-content-text">
                    <label>{{$t('common.fields.serialNumber.displayName')}}：</label>
                    <span>{{ option.serialNumber }}</span>
                </span>
                <span class="customer-template-option-content-text">
                    <label>{{$t('common.form.type.customerAddress')}}：</label>
                    <span>{{ formatAddress(option.customerAddress) }}</span>
                </span>
            </p>
        </div>
    </biz-form-remote-select>
</template>
<script>
// api
import { getParentCustomerList } from '@src/api/CustomerApi'
// mixin
import FormMixin from '@src/component/form/mixin/form';

export default {
    name: 'form-customer-level',
    mixins: [FormMixin],
    props: {
        value: [String, Number, Array],
    },
    data() {
        return {
            selectValue: []
        }
    },
    mounted() {
        // 如果是空字符串，需要设置为null，否则后端会报错
        if (this.value === '') this.inputForValue(null);
        else this.selectValue = [{
            id: this.value?.customerId,
            name: this.value?.customerName,
        }];
    },
    methods: {
        remoteMethod(params) {
            // 编辑时需要传当前客户id，用于查询
            let parentCustomerId = this.$route?.path;
            parentCustomerId = parentCustomerId.startsWith('/customer/edit/') ? parentCustomerId.replace(/^\/customer\/edit\//, '') : '';
            return getParentCustomerList({
                parentCustomerId,
                ...params,
            }).then(res => {
                return {
                    ...res?.result,
                }
            });
        },
        handleChange(value) {
            const newValue = {
                customerId: value[0]?.id,
                customerName: value[0]?.name,
            }
            this.selectValue = value;
            this.inputForValue(newValue);
        },
        formatAddress(addressObj) {
            const addressParts = [
                addressObj.adCountry,
                addressObj.adProvince,
                addressObj.adCity,
                addressObj.adDist,
                addressObj.adStreet,
                addressObj.adAddress
            ];
            
            // 过滤掉空值并用-连接
            return addressParts.filter(part => part).join('-');
        },
    }
}
</script>

<style lang="scss">

</style>
